package com.maodou.core.ui.theme

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

/**
 * 实际项目使用示例
 * 
 * 这个文件展示了如何在真实的 Android 项目中使用主题系统
 * 包括常见的 UI 组件和布局模式
 */

// ==================== 用户资料页面示例 ====================

/**
 * 用户资料页面
 * 展示如何在实际页面中使用主题系统
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun UserProfileScreen() {
    AppTheme {
        val adaptiveDimensions = AdaptiveDimensions.current()
        
        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text(
                            text = "用户资料",
                            style = MaterialTheme.typography.titleLarge
                        )
                    },
                    actions = {
                        IconButton(onClick = { /* 设置 */ }) {
                            Icon(
                                imageVector = Icons.Default.Settings,
                                contentDescription = "设置"
                            )
                        }
                    },
                    colors = TopAppBarDefaults.topAppBarColors(
                        containerColor = MaterialTheme.colorScheme.surface,
                        titleContentColor = MaterialTheme.colorScheme.onSurface
                    )
                )
            }
        ) { paddingValues ->
            LazyColumn(
                modifier = Modifier
                    .fillMaxSize()
                    .background(MaterialTheme.colorScheme.background)
                    .padding(paddingValues)
                    .padding(horizontal = adaptiveDimensions.medium),
                verticalArrangement = Arrangement.spacedBy(adaptiveDimensions.medium)
            ) {
                item {
                    // 用户头像和基本信息
                    UserInfoCard()
                }
                
                item {
                    // 统计信息
                    UserStatsCard()
                }
                
                item {
                    // 设置选项
                    SettingsSection()
                }
            }
        }
    }
}

/**
 * 用户信息卡片
 */
@Composable
private fun UserInfoCard() {
    val adaptiveDimensions = AdaptiveDimensions.current()
    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp.dp
    
    Card(
        modifier = Modifier.fillMaxWidth(),
        shape = RoundedCornerShape(adaptiveDimensions.medium),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface
        ),
        elevation = CardDefaults.cardElevation(
            defaultElevation = 2.dp
        )
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(adaptiveDimensions.large),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // 头像
            Box(
                modifier = Modifier
                    .size(AdaptiveSizes.iconSize.getSize(screenWidth) * 2)
                    .clip(CircleShape)
                    .background(MaterialTheme.colorScheme.primary),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = Icons.Default.Person,
                    contentDescription = "用户头像",
                    modifier = Modifier.size(AdaptiveSizes.iconSize.getSize(screenWidth)),
                    tint = MaterialTheme.colorScheme.onPrimary
                )
            }
            
            Spacer(modifier = Modifier.height(adaptiveDimensions.medium))
            
            // 用户名
            Text(
                text = "张三",
                style = MaterialTheme.typography.headlineSmall,
                color = MaterialTheme.colorScheme.onSurface,
                fontWeight = FontWeight.Bold
            )
            
            Spacer(modifier = Modifier.height(adaptiveDimensions.small))
            
            // 用户描述
            Text(
                text = "Android 开发工程师",
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}

/**
 * 用户统计卡片
 */
@Composable
private fun UserStatsCard() {
    val adaptiveDimensions = AdaptiveDimensions.current()
    
    Card(
        modifier = Modifier.fillMaxWidth(),
        shape = RoundedCornerShape(adaptiveDimensions.medium),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface
        )
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(adaptiveDimensions.large),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            StatItem(
                title = "项目",
                value = "12",
                modifier = Modifier.weight(1f)
            )
            
            StatItem(
                title = "关注",
                value = "256",
                modifier = Modifier.weight(1f)
            )
            
            StatItem(
                title = "粉丝",
                value = "1.2K",
                modifier = Modifier.weight(1f)
            )
        }
    }
}

/**
 * 统计项组件
 */
@Composable
private fun StatItem(
    title: String,
    value: String,
    modifier: Modifier = Modifier
) {
    val adaptiveDimensions = AdaptiveDimensions.current()
    
    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = value,
            style = MaterialTheme.typography.headlineMedium,
            color = MaterialTheme.colorScheme.primary,
            fontWeight = FontWeight.Bold
        )
        
        Spacer(modifier = Modifier.height(adaptiveDimensions.small))
        
        Text(
            text = title,
            style = MaterialTheme.typography.bodySmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant
        )
    }
}

/**
 * 设置选项区域
 */
@Composable
private fun SettingsSection() {
    val adaptiveDimensions = AdaptiveDimensions.current()
    
    Card(
        modifier = Modifier.fillMaxWidth(),
        shape = RoundedCornerShape(adaptiveDimensions.medium),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface
        )
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(adaptiveDimensions.medium)
        ) {
            Text(
                text = "设置",
                style = MaterialTheme.typography.titleMedium,
                color = MaterialTheme.colorScheme.onSurface,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.padding(bottom = adaptiveDimensions.medium)
            )
            
            val settingsItems = listOf(
                "个人信息" to "编辑个人资料",
                "隐私设置" to "管理隐私选项",
                "通知设置" to "配置通知偏好",
                "主题设置" to "切换应用主题",
                "关于我们" to "应用信息和版本"
            )
            
            settingsItems.forEachIndexed { index, (title, subtitle) ->
                SettingItem(
                    title = title,
                    subtitle = subtitle,
                    onClick = { /* 处理点击 */ }
                )
                
                if (index < settingsItems.size - 1) {
                    Divider(
                        modifier = Modifier.padding(
                            vertical = adaptiveDimensions.small
                        ),
                        color = MaterialTheme.colorScheme.outline.copy(alpha = 0.3f)
                    )
                }
            }
        }
    }
}

/**
 * 设置项组件
 */
@Composable
private fun SettingItem(
    title: String,
    subtitle: String,
    onClick: () -> Unit
) {
    val adaptiveDimensions = AdaptiveDimensions.current()
    
    Surface(
        onClick = onClick,
        modifier = Modifier.fillMaxWidth(),
        color = MaterialTheme.colorScheme.surface
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = adaptiveDimensions.medium)
        ) {
            Text(
                text = title,
                style = MaterialTheme.typography.bodyLarge,
                color = MaterialTheme.colorScheme.onSurface
            )
            
            Spacer(modifier = Modifier.height(adaptiveDimensions.small))
            
            Text(
                text = subtitle,
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}

// ==================== 列表页面示例 ====================

/**
 * 文章列表页面
 * 展示如何在列表中使用自适应尺寸
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ArticleListScreen() {
    AppTheme {
        val adaptiveDimensions = AdaptiveDimensions.current()
        val configuration = LocalConfiguration.current
        val screenWidth = configuration.screenWidthDp.dp
        
        // 模拟文章数据
        val articles = remember {
            (1..20).map { index ->
                Article(
                    id = index,
                    title = "文章标题 $index",
                    summary = "这是文章 $index 的摘要内容，展示了如何在列表中使用自适应尺寸系统。",
                    author = "作者 $index",
                    publishTime = "2024-01-${index.toString().padStart(2, '0')}"
                )
            }
        }
        
        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text(
                            text = "文章列表",
                            style = MaterialTheme.typography.titleLarge
                        )
                    },
                    colors = TopAppBarDefaults.topAppBarColors(
                        containerColor = MaterialTheme.colorScheme.surface
                    )
                )
            }
        ) { paddingValues ->
            LazyColumn(
                modifier = Modifier
                    .fillMaxSize()
                    .background(MaterialTheme.colorScheme.background)
                    .padding(paddingValues)
                    .padding(horizontal = adaptiveDimensions.medium),
                verticalArrangement = Arrangement.spacedBy(adaptiveDimensions.medium)
            ) {
                items(articles) { article ->
                    ArticleItem(
                        article = article,
                        onClick = { /* 处理文章点击 */ }
                    )
                }
            }
        }
    }
}

/**
 * 文章数据类
 */
data class Article(
    val id: Int,
    val title: String,
    val summary: String,
    val author: String,
    val publishTime: String
)

/**
 * 文章列表项
 */
@Composable
private fun ArticleItem(
    article: Article,
    onClick: () -> Unit
) {
    val adaptiveDimensions = AdaptiveDimensions.current()
    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp.dp
    
    Card(
        onClick = onClick,
        modifier = Modifier
            .fillMaxWidth()
            .height(
                // 根据屏幕大小调整列表项高度
                when {
                    screenWidth < Breakpoints.Small -> ComponentSizes.ListItemHeightLarge
                    screenWidth < Breakpoints.Medium -> ComponentSizes.ListItemHeightExtraLarge
                    else -> 120.dp
                }
            ),
        shape = RoundedCornerShape(adaptiveDimensions.medium),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface
        ),
        elevation = CardDefaults.cardElevation(
            defaultElevation = 1.dp
        )
    ) {
        Row(
            modifier = Modifier
                .fillMaxSize()
                .padding(adaptiveDimensions.medium),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // 文章缩略图占位
            Box(
                modifier = Modifier
                    .size(AdaptiveSizes.iconSize.getSize(screenWidth) * 1.5f)
                    .clip(RoundedCornerShape(adaptiveDimensions.small))
                    .background(MaterialTheme.colorScheme.primaryContainer)
            )
            
            Spacer(modifier = Modifier.width(adaptiveDimensions.medium))
            
            // 文章信息
            Column(
                modifier = Modifier.weight(1f)
            ) {
                Text(
                    text = article.title,
                    style = MaterialTheme.typography.titleMedium,
                    color = MaterialTheme.colorScheme.onSurface,
                    fontWeight = FontWeight.Medium,
                    maxLines = 1
                )
                
                Spacer(modifier = Modifier.height(adaptiveDimensions.small))
                
                Text(
                    text = article.summary,
                    style = MaterialTheme.typography.bodySmall,
                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                    maxLines = 2
                )
                
                Spacer(modifier = Modifier.height(adaptiveDimensions.small))
                
                Row {
                    Text(
                        text = article.author,
                        style = MaterialTheme.typography.labelSmall,
                        color = MaterialTheme.colorScheme.primary
                    )
                    
                    Spacer(modifier = Modifier.width(adaptiveDimensions.small))
                    
                    Text(
                        text = "•",
                        style = MaterialTheme.typography.labelSmall,
                        color = MaterialTheme.colorScheme.onSurfaceVariant
                    )
                    
                    Spacer(modifier = Modifier.width(adaptiveDimensions.small))
                    
                    Text(
                        text = article.publishTime,
                        style = MaterialTheme.typography.labelSmall,
                        color = MaterialTheme.colorScheme.onSurfaceVariant
                    )
                }
            }
        }
    }
}

// ==================== 表单页面示例 ====================

/**
 * 表单页面示例
 * 展示如何在表单中使用自适应尺寸
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FormScreen() {
    AppTheme {
        val adaptiveDimensions = AdaptiveDimensions.current()
        val configuration = LocalConfiguration.current
        val screenWidth = configuration.screenWidthDp.dp
        
        var name by remember { mutableStateOf("") }
        var email by remember { mutableStateOf("") }
        var message by remember { mutableStateOf("") }
        
        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text(
                            text = "联系我们",
                            style = MaterialTheme.typography.titleLarge
                        )
                    }
                )
            }
        ) { paddingValues ->
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(MaterialTheme.colorScheme.background)
                    .padding(paddingValues)
                    .padding(adaptiveDimensions.medium),
                verticalArrangement = Arrangement.spacedBy(adaptiveDimensions.large)
            ) {
                // 表单标题
                Text(
                    text = "请填写您的信息",
                    style = MaterialTheme.typography.headlineSmall,
                    color = MaterialTheme.colorScheme.onBackground
                )
                
                // 姓名输入框
                OutlinedTextField(
                    value = name,
                    onValueChange = { name = it },
                    label = { Text("姓名") },
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(AdaptiveSizes.buttonHeight.getSize(screenWidth)),
                    shape = RoundedCornerShape(adaptiveDimensions.small)
                )
                
                // 邮箱输入框
                OutlinedTextField(
                    value = email,
                    onValueChange = { email = it },
                    label = { Text("邮箱") },
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(AdaptiveSizes.buttonHeight.getSize(screenWidth)),
                    shape = RoundedCornerShape(adaptiveDimensions.small)
                )
                
                // 消息输入框
                OutlinedTextField(
                    value = message,
                    onValueChange = { message = it },
                    label = { Text("留言") },
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(120.dp),
                    shape = RoundedCornerShape(adaptiveDimensions.small),
                    maxLines = 5
                )
                
                Spacer(modifier = Modifier.weight(1f))
                
                // 提交按钮
                Button(
                    onClick = { /* 处理提交 */ },
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(AdaptiveSizes.buttonHeight.getSize(screenWidth)),
                    shape = RoundedCornerShape(adaptiveDimensions.small)
                ) {
                    Text(
                        text = "提交",
                        style = MaterialTheme.typography.labelLarge
                    )
                }
            }
        }
    }
}